accessibility
Macromedia Logo Upper Navigation Bar
  Help
Lower Navigation Bar
Products Support Designer Developer Downloads Store International Site Map Company
Home > Designer & Developer Center > Dreamweaver MX Application Development Center
Icon or Spacer Macromedia Dreamweaver MX Application Development Center
Stephanie Sullivan

Stephanie Sullivan
VioletSky Design

 
Ginger Ciuperca
Ginger Ciuperca
Sapphire Designs
 
Simple styling with CSS


Tableless design has become a hot topic lately. Drew McLellan wrote an informative tutorial on trimming page size and controlling your structure without tables. Our article builds on Drew's piece and takes you a step beyond into nearly image-free design. You will learn to create equally attractive pages while using few images—or even none at all.

With each new technology that emerges, people's attention span shortens. Studies show that people expect speed from their web experience as well. If your web pages don't load quickly, the visiting surfer will take the next wave out and move on. Many designers do understand this fact. However, what confuses people is the belief that designing "quick-loading pages" necessarily leaves them no choice but to design ugly, plain-vanilla sites. Not true. The magic of Cascading Style Sheets (CSS) lets you have your cake and eat it too. Pages that download quickly, yet look appealing, are no problem using HTML, CSS, and (sometimes) a dash of JavaScript.

Our purpose is not to convince you of the virtues of CSS over tables for positioning, or even to explain all the advantages of CSS. Tableless design is not a prerequisite to styling with CSS, although it is the goal. Our point is to show you how to cut your page-load time and file size tremendously by using a few CSS shortcuts. These shortcuts can (and will in this tutorial) remove many or even all of the images from your web pages. These techniques can be used to whatever degree you wish in your own web pages. To show what's possible, we're going to avoid images entirely, except for a very small background image.

------------------------------------------------------------------------------
Table of contents
·
Clean that code
·
Ditch those images
·
Create image-free rollovers
·
Add floating characters
·
Netscape: That browser's got issues
·
Reach out and touch some sites
 
--------------------------------------------------------------------------------
Sample files
Before you begin, download the source files for this tutorial:
Windows  
Download the sample file simple_styling.zip (7K)  
 
 
  Next
--------------------------------------------------------------------------------

About the authors
Stephanie Sullivan owns VioletSky Design in coastal North Carolina, where she creates sublime, fast-loading websites for businesses and creatives. She has recently taken on writing and technical editing. You will find her glued to her Dual G4 about 12 hours a day, madly keeping up with her clients, taking care of her husband and two boys, participating in several web design forums, and talking to the little people that live inside her computer. In her spare time she creates websites and studies web development. She was last spotted at TODCON, the awesome summer camp for geeks.

Ginger Ciuperca began working for the Centers for Disease Control in Atlanta after receiving a BS in Biology and having high hopes of going to medical school. Plans kind of changed after her daughter was born; she decided to stay at home and follow her desire for creative study. She has been pursuing web and graphic design ever since. She dedicates almost all of her time to building websites, learning current standards, and writing. After accompanying Stephanie Sullivan to summer camp at TODCON, a whole new world of content management and writing gigs appeared. During her waking hours, she generally plays with her daughter, helps her husband with his business, or is immersed in a book, which is almost always computer-related. She can be reached at her website, Sapphire Designs.

 

 
       
©1995-2002 Macromedia, Inc. All rights reserved.
Accessibility | Privacy policy | Contact us | Site Map